import React, { Component } from "react"
import TheButton from "@/components/TheButton"
import { Form, Radio, Input } from 'antd';
import { getImInletList, getImInletUpdate } from '@/request/wallet/walletIn';
import { isContained } from '@/utils/tools'

export default class EntryConfiguration extends Component {
  constructor() {
    super()
    this.inputRef = React.createRef();
    this.state = {
      inletType: '',
      inletName: '',
      inputStatus: null,
      imInletId: "",
      oldValue: '',
      contentType: "",
      iconType: '',
      idents:''
    }

  }
  componentDidMount() {
    console.log("this.props.idents:",this.props);
    this.setState({
      idents:sessionStorage.getItem('ident').split(',')
    })
   
    this.getData()
  }
  // 获取数据
  getData = async () => {
    let res = await getImInletList()
    if (res.code === 0 && res.data) {
      this.setState({
        contentType: res.data.contentType,
        inletName: res.data.inletName,
        imInletId: res.data.imInletId,
        inletType: res.data.inletType,
        oldValue: res.data.inletName,
        iconType: res.data.iconType  //0展示  1隐藏
      })
    }
  };
  statusChange = async (e) => {
    let res = await getImInletUpdate({
      imInletId: this.state.imInletId, inletType: e.target.value
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
    }
  }
  inputValue = (e) => {
    this.setState({
      inletName: e.target.value.replace(/\s+/g, "")
    })
  }
  edit = () => {
    this.setState({
      inputStatus: true
    })
    // 自动聚焦
  }
  cancel = () => {
    this.setState({
      inputStatus: false,
      inletName: this.state.oldValue
    })
  }
  save = async () => {
    let length = this.state.inletName.length
    if (length < 2) {
      React.$message({
        type: 'error',
        content: '限制输入2-5个字'
      })
      return false
    }
    let res = await getImInletUpdate({
      imInletId: this.state.imInletId, inletName: this.state.inletName
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
      this.setState({
        inputStatus: false
      })
    }
  }
  // 宠圈动态礼物入口
  chatSettingChange = async (e) => {
    let res = await getImInletUpdate({
      imInletId: this.state.imInletId, iconType: e.target.value
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
    }
  }
  // 修改聊天框礼物入口
  chatSettingChatChange = async (e) => {
    let res = await getImInletUpdate({
      imInletId: this.state.imInletId, contentType: e.target.value
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
    }
  }
  render() {
    const { contentType, inletType,  inletName, inputStatus, iconType,idents } = this.state
    let content = (<> <span>{inletName}</span> <TheButton haspermi={["myPocket:inSetting:edit"]} onClick={this.edit}>编辑</TheButton> </>)
    let inputContent = (
      <>
        <Input ref={this.inputRef} style={{ width: 100 }} onChange={this.inputValue} value={inletName} maxLength={5}></Input>
        <TheButton  onClick={this.cancel}>取消</TheButton>
        <TheButton  onClick={this.save}>保存</TheButton>
      </>
    )
    return (
      <div className="p-layout-box commodity-examine">
        {/* <div style={{ fontWeight: 'bold', margin: '10px 40px', }}>我的口袋入口设置</div>
        <Form className="entry-content" colon={false} labelCol={{ span: 2 }}>
          <Form.Item label="入口名称">
            {inputStatus ? inputContent : content}
          </Form.Item>
          <Form.Item label="入口展示状态" >
            <Radio.Group disabled={isContained(idents, "myPocket:inSetting:radio")} value={inletType} onChange={value => this.statusChange(value)}>
              <Radio value={0}>展示</Radio>
              <Radio value={1}>隐藏</Radio>
            </Radio.Group>
          </Form.Item>
        </Form> */}
        <div style={{ fontWeight: 'bold', margin: '10px 40px', }}>礼物入口配置</div>
        <Form className="entry-content" colon={false} labelCol={{ span: 2 }}>
          <Form.Item label="宠圈动态礼物入口" >
            <Radio.Group disabled={isContained(idents, "myPocket:inSetting:radio")}  value={contentType} onChange={value => this.chatSettingChatChange(value)}>
              <Radio value={1}>隐藏</Radio>
              <Radio value={2}>展示</Radio>
            </Radio.Group>
          </Form.Item>
          {/* <Form.Item label="聊天框礼物入口" >
            <Radio.Group disabled={isContained(idents, "myPocket:inSetting:radio")} value={iconType} onChange={value => this.chatSettingChange(value)}>
              <Radio value={1}>隐藏</Radio>
              <Radio value={3}>展示</Radio>
            </Radio.Group>
          </Form.Item> */}
        </Form>
      </div>
    );
  }
}